<html xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mtps="http://msdn2.microsoft.com/mtps" xmlns:mshelp="http://msdn.microsoft.com/mshelp" xmlns:ddue="http://ddue.schemas.microsoft.com/authoring/2003/5" xmlns:msxsl="urn:schemas-microsoft-com:xslt"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" /><META NAME="BuildDateTime" CONTENT="2013-01-25 11:57:43" /><META NAME="BuildVersion" CONTENT="1.0.13025.1158" /><META NAME="save" CONTENT="history" /><META NAME="DCSext.Title" CONTENT="SharePoint 2013: Create clip animations in apps using the animation library" /><title>SharePoint 2013: Create clip animations in apps using the animation library</title><meta name="Language" content="en-us" /><meta name="Microsoft.Help.Id" content="9ccf85bd-e2e9-4e0c-9836-351ff53d5fb8" /><meta name="Microsoft.Help.ContentType" content="Concepts" /><style type="text/css">
                        .userDataStyle {
                        BEHAVIOR: url(#default#userData)
                        }
                        DIV.saveHistory {
                        BEHAVIOR: url(#default#savehistory)
                        }
                        IMG.toggle {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; MARGIN-RIGHT: 5px; BORDER-RIGHT: 0px
                        }
                        IMG#toggleAllImage {
                        MARGIN-LEFT: 0px; VERTICAL-ALIGN: middle
                        }
                        MSHelp\:link {
                        COLOR: #0000ff; CURSOR: hand; TEXT-DECORATION: underline; hoverColor: #3366ff
                        }
                        MSHelp\:link:visited {
                        COLOR: #0481da
                        }
                        BODY {
                        FONT-STYLE: normal; MARGIN: 0px; WIDTH: 100%; FONT-FAMILY: Verdana; BACKGROUND: #ffffff; COLOR: #000000; FONT-SIZE: medium; FONT-WEIGHT: normal
                        }
                        DL {
                        MARGIN-TOP: 15px; PADDING-LEFT: 1px; MARGIN-BOTTOM: 5px
                        }
                        DL.authored DT {
                        MARGIN-TOP: 2px
                        }
                        DD {
                        MARGIN-LEFT: 0px
                        }
                        UL {
                        LIST-STYLE-TYPE: disc; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 17px
                        }
                        UL UL {
                        LIST-STYLE-TYPE: disc; MARGIN-TOP: 3px; MARGIN-BOTTOM: 4px; MARGIN-LEFT: 17px
                        }
                        OL {
                        LIST-STYLE-TYPE: decimal; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 28px
                        }
                        OL OL {
                        LIST-STYLE-TYPE: lower-alpha; MARGIN-TOP: 3px; MARGIN-BOTTOM: 4px; MARGIN-LEFT: 28px
                        }
                        OL OL OL {
                        LIST-STYLE-TYPE: lower-roman; MARGIN-TOP: 3px; MARGIN-BOTTOM: 4px; MARGIN-LEFT: 28px
                        }
                        LI {
                        MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px
                        }
                        P {
                        MARGIN-TOP: 10px; MARGIN-BOTTOM: 5px
                        }
                        A:link {
                        COLOR: #0000ff
                        }
                        A:visited {
                        COLOR: #dd7c3b
                        }
                        A:hover {
                        COLOR: #3366ff
                        }
                        CODE {
                        FONT-FAMILY: Monospace, Courier New, Courier; COLOR: #000066; FONT-SIZE: 105%
                        }
                        SPAN.parameter {
                        FONT-STYLE: italic
                        }
                        SPAN.italic {
                        FONT-STYLE: italic
                        }
                        SPAN.selflink {
                        FONT-WEIGHT: bold
                        }
                        SPAN.nolink {
                        FONT-WEIGHT: bold
                        }
                        DIV#mainSection {
                        WIDTH: 100%; FONT-SIZE: 62.5%
                        }
                        HTML &gt; BODY #mainSection {
                        WIDTH: 100%; FONT-SIZE: 73%
                        }
                        DIV#mainBody {
                        MARGIN-TOP: 10px; MARGIN-LEFT: 15px; FONT-SIZE: 100%
                        }
                        HTML &gt; BODY #mainBody {
                        PADDING-BOTTOM: 20px; MARGIN-TOP: 10px; MARGIN-LEFT: 15px; FONT-SIZE: 93%
                        }
                        DIV#mainBody P {
                        PADDING-RIGHT: 5px
                        }
                        DIV#mainBody OL {
                        PADDING-RIGHT: 5px
                        }
                        DIV#mainBody UL {
                        PADDING-RIGHT: 5px
                        }
                        DIV#mainBody DL {
                        PADDING-RIGHT: 5px
                        }
                        DIV#header {
                        PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; PADDING-TOP: 0px
                        }
                        DIV#header TABLE {
                        WIDTH: 100%
                        }
                        DIV#header TABLE TD {
                        MARGIN-TOP: 0px; PADDING-RIGHT: 20px; MARGIN-BOTTOM: 0px; COLOR: #0000ff; FONT-SIZE: 70%
                        }
                        DIV#header TABLE TR#headerTableRow2 TD {
                        PADDING-LEFT: 13px
                        }
                        DIV#header TABLE TR#headerTableRow3 TD {
                        PADDING-LEFT: 15px; PADDING-TOP: 2px
                        }
                        DIV#header TABLE#bottomTable {
                        TEXT-ALIGN: left; PADDING-BOTTOM: 5px; PADDING-LEFT: 15px; BORDER-TOP: #ffffff 1px solid; PADDING-TOP: 5px
                        }
                        DIV#mainSection TABLE TD.imageCell {
                        WHITE-SPACE: nowrap
                        }
                        DIV#mainBody DIV.alert {
                        WIDTH: 98.9%
                        }
                        DIV#mainBody DIV.code {
                        WIDTH: 98.9%
                        }
                        DIV#mainBody DIV.tableSection {
                        WIDTH: 98.9%
                        }
                        DIV#mainBody DIV.section DIV.alert {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section DIV.code {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section DIV.tableSection {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section UL DIV.alert {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section UL DIV.code {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section UL DIV.tableSection {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section OL DIV.alert {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section OL DIV.code {
                        WIDTH: 100%
                        }
                        DIV#mainBody DIV.section OL DIV.tableSection {
                        WIDTH: 100%
                        }
                        DIV.alert P {
                        MARGIN-TOP: 5px; MARGIN-BOTTOM: 8px
                        }
                        DIV.code P {
                        MARGIN-TOP: 5px; MARGIN-BOTTOM: 8px
                        }
                        DD P {
                        MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px
                        }
                        DIV.tableSection P {
                        MARGIN-TOP: 1px; MARGIN-BOTTOM: 4px
                        }
                        LI P {
                        MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px
                        }
                        DIV.seeAlsoNoToggleSection DL {
                        MARGIN-TOP: 8px; PADDING-LEFT: 1px; MARGIN-BOTTOM: 1px
                        }
                        DIV.seeAlsoNoToggleSection DD P {
                        MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px
                        }
                        DIV.section DL {
                        MARGIN-TOP: 8px; PADDING-LEFT: 1px; MARGIN-BOTTOM: 1px
                        }
                        DIV.section DD P {
                        MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px
                        }
                        DIV.code TABLE {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN-TOP: -0.4em; WIDTH: 100%; MARGIN-BOTTOM: 5px; FONT-SIZE: 95%; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        DIV.code TABLE TH {
                        BORDER-BOTTOM: #c8cdde 1px solid; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #efeff7; COLOR: #000066; FONT-WEIGHT: bold
                        }
                        DIV.code TABLE TD {
                        PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #f7f7ff; BORDER-TOP: #ffffff 1px solid; PADDING-TOP: 5px
                        }
                        SPAN#runningHeaderText {
                        PADDING-LEFT: 13px; COLOR: #8c8c8c; FONT-SIZE: 90%
                        }
                        SPAN#nsrTitle {
                        FONT-FAMILY: arial; COLOR: #000000; FONT-SIZE: 160%; FONT-WEIGHT: 400
                        }
                        DIV#footer {
                        PADDING-BOTTOM: 6px; MARGIN: 0px; PADDING-LEFT: 1px; WIDTH: 100%; PADDING-RIGHT: 1px; FONT-SIZE: 80%; PADDING-TOP: 8px
                        }
                        HTML &gt; BODY DIV#footer {
                        PADDING-BOTTOM: 6px; MARGIN: 0px; PADDING-LEFT: 1px; WIDTH: 98%; PADDING-RIGHT: 1px; FONT-SIZE: 80%; PADDING-TOP: 2px
                        }
                        DIV.seeAlsoNoToggleSection {
                        PADDING-BOTTOM: 2px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 15px; MARGIN-LEFT: 0px; PADDING-TOP: 2px
                        }
                        DIV.section {
                        PADDING-BOTTOM: 0px; PADDING-LEFT: 16px; WIDTH: 100%; PADDING-RIGHT: 15px; MARGIN-LEFT: 0px; PADDING-TOP: 0px
                        }
                        HTML &gt; BODY DIV.section {
                        PADDING-BOTTOM: 2px; PADDING-LEFT: 16px; WIDTH: 97%; PADDING-RIGHT: 15px; MARGIN-LEFT: 0px; PADDING-TOP: 2px
                        }
                        DIV.seeSection {
                        PADDING-BOTTOM: 2px; PADDING-LEFT: 16px; WIDTH: 100%; PADDING-RIGHT: 15px; MARGIN-LEFT: 0px; PADDING-TOP: 0px
                        }
                        .heading {
                        MARGIN-TOP: 18px; MARGIN-BOTTOM: 8px; FONT-WEIGHT: bold
                        }
                        H1.heading {
                        COLOR: #003399; FONT-SIZE: 145%
                        }
                        .subHeading {
                        MARGIN-BOTTOM: 4px; FONT-WEIGHT: bold
                        }
                        .procedureSubHeading {
                        MARGIN-BOTTOM: 4px; FONT-WEIGHT: bold
                        }
                        H3.subHeading {
                        COLOR: #003399; FONT-SIZE: 125%; FONT-WEIGHT: 800
                        }
                        H3.procedureSubHeading {
                        COLOR: #003399; FONT-SIZE: 100%
                        }
                        H4.subHeading {
                        FONT-VARIANT: small-caps; COLOR: #003399; FONT-SIZE: 110%; FONT-WEIGHT: 800
                        }
                        SPAN.labelheading {
                        COLOR: #003399; FONT-SIZE: 100%
                        }
                        DIV.labelheading {
                        COLOR: #003399; FONT-SIZE: 100%
                        }
                        IMG.copyCodeImage {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN: 1px 3px 1px 1px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        IMG.downloadCodeImage {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; MARGIN-RIGHT: 3px; BORDER-RIGHT: 0px
                        }
                        IMG.viewCodeImage {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; MARGIN-RIGHT: 3px; BORDER-RIGHT: 0px
                        }
                        IMG.note {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; MARGIN-RIGHT: 3px; BORDER-RIGHT: 0px
                        }
                        DIV#mainSection TABLE {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN-TOP: 5px; WIDTH: 98.9%; MARGIN-BOTTOM: 5px; FONT-SIZE: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        DIV#mainSection TABLE TR {
                        VERTICAL-ALIGN: top
                        }
                        DIV#mainSection TABLE TH {
                        BORDER-BOTTOM: #c8cdde 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #d5d5d3 1px; BACKGROUND-COLOR: #efeff7; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; COLOR: #000066
                        }
                        DIV#mainSection TABLE TD {
                        BORDER-BOTTOM: #d5d5d3 1px solid; BORDER-LEFT: #d5d5d3 1px; BACKGROUND-COLOR: #f7f7ff; PADDING-LEFT: 5px; PADDING-RIGHT: 5px
                        }
                        DIV#mainSection TABLE TD.imageCell {
                        WHITE-SPACE: nowrap
                        }
                        DIV.code TABLE {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 100%; MARGIN-BOTTOM: 5px; FONT-SIZE: 95%; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        DIV.code TABLE TH {
                        BORDER-BOTTOM: #c8cdde 1px solid; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #efeff7; COLOR: #000066; FONT-WEIGHT: bold
                        }
                        DIV.code TABLE TD {
                        PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #f7f7ff; BORDER-TOP: #ffffff 1px solid; PADDING-TOP: 5px
                        }
                        DIV.alert TABLE {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDTH: 100%; FONT-SIZE: 100%; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        DIV.alert TABLE TH {
                        PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #efeff7; BORDER-BOTTOM-WIDTH: 0px; COLOR: #000066
                        }
                        DIV.alert TABLE TD {
                        PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #f7f7ff; BORDER-TOP: #ffffff 1px solid
                        }
                        SPAN.copyCode {
                        TEXT-ALIGN: right; DISPLAY: inline; FLOAT: right; COLOR: #0000ff; FONT-SIZE: 90%; CURSOR: pointer; FONT-WEIGHT: normal; TEXT-DECORATION: underline
                        }
                        SPAN.copyCodeOnHover {
                        TEXT-ALIGN: right; DISPLAY: inline; FLOAT: right; COLOR: #e85f17; FONT-SIZE: xx-small; CURSOR: pointer; FONT-WEIGHT: normal; TEXT-DECORATION: underline
                        }
                        .downloadCode {
                        COLOR: #0000ff; FONT-SIZE: 90%; CURSOR: pointer; FONT-WEIGHT: normal
                        }
                        .viewCode {
                        COLOR: #0000ff; FONT-SIZE: 90%; CURSOR: pointer; FONT-WEIGHT: normal
                        }
                        DIV.code PRE {
                        FONT-FAMILY: Monospace, Courier New, Courier; WORD-WRAP: break-word; BACKGROUND: #f7f7ff; COLOR: #000066; FONT-SIZE: 105%
                        }
                        .tip {
                        FONT-STYLE: italic; COLOR: #0000ff; CURSOR: pointer; TEXT-DECORATION: underline
                        }
                        .math {
                        FONT-FAMILY: Times New Roman; FONT-SIZE: 125%
                        }
                        #devlangsMenu {
                        BORDER-BOTTOM: #f3cbb5 1px solid; POSITION: absolute; BORDER-LEFT: #f3cbb5 1px solid; PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; PADDING-RIGHT: 8px; BACKGROUND: #fcece4; VISIBILITY: hidden; FONT-SIZE: 70%; BORDER-TOP: #f3cbb5 1px solid; BORDER-RIGHT: #f3cbb5 1px solid; PADDING-TOP: 4px
                        }
                        #memberOptionsMenu {
                        BORDER-BOTTOM: #f3cbb5 1px solid; POSITION: absolute; BORDER-LEFT: #f3cbb5 1px solid; PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; PADDING-RIGHT: 8px; BACKGROUND: #fcece4; VISIBILITY: hidden; FONT-SIZE: 70%; BORDER-TOP: #f3cbb5 1px solid; BORDER-RIGHT: #f3cbb5 1px solid; PADDING-TOP: 4px
                        }
                        #memberFrameworksMenu {
                        BORDER-BOTTOM: #f3cbb5 1px solid; POSITION: absolute; BORDER-LEFT: #f3cbb5 1px solid; PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; PADDING-RIGHT: 8px; BACKGROUND: #fcece4; VISIBILITY: hidden; FONT-SIZE: 70%; BORDER-TOP: #f3cbb5 1px solid; BORDER-RIGHT: #f3cbb5 1px solid; PADDING-TOP: 4px
                        }
                        .checkboxLabel {
                        PADDING-BOTTOM: 4px; COLOR: #0000ff; FONT-SIZE: 90%; CURSOR: pointer; TEXT-DECORATION: underline
                        }
                        IMG#devlangsDropdownImage {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN-LEFT: 0px; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        IMG#memberOptionsDropdownImage {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN-LEFT: 0px; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        IMG#memberFrameworksDropdownImage {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; MARGIN-LEFT: 0px; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                        DIV.footerLine {
                        PADDING-BOTTOM: 6px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 8px
                        }
                        DIV.hr1 {
                        PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; BACKGROUND: #c8cdde; HEIGHT: 1px; FONT-SIZE: 1px; PADDING-TOP: 0px
                        }
                        DIV.hr2 {
                        PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; BACKGROUND: #d4dfff; HEIGHT: 1px; FONT-SIZE: 1px; PADDING-TOP: 0px
                        }
                        DIV.hr3 {
                        PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; BACKGROUND: #eeeeff; HEIGHT: 1px; FONT-SIZE: 1px; PADDING-TOP: 0px
                        }
                        SPAN.cs {
                        DISPLAY: none
                        }
                        SPAN.vb {
                        DISPLAY: none
                        }
                        SPAN.cpp {
                        DISPLAY: none
                        }
                        SPAN.nu {
                        DISPLAY: inline
                        }
                        SPAN.fs {
                        DISPLAY: none
                        }
                        SPAN.code {
                        FONT-FAMILY: Monospace, Courier New, Courier; COLOR: #000066; FONT-SIZE: 105%
                        }
                        SPAN.ui {
                        FONT-WEIGHT: bold
                        }
                        SPAN.math {
                        FONT-STYLE: italic
                        }
                        SPAN.input {
                        FONT-WEIGHT: bold
                        }
                        SPAN.term {
                        FONT-STYLE: italic
                        }
                        SPAN.label {
                        FONT-WEIGHT: bold
                        }
                        SPAN.foreignPhrase {
                        FONT-STYLE: italic
                        }
                        SPAN.placeholder {
                        FONT-STYLE: italic
                        }
                        SPAN.keyword {
                        FONT-WEIGHT: bold
                        }
                        SPAN.typeparameter {
                        FONT-STYLE: italic
                        }
                        DIV.caption {
                        COLOR: #003399; FONT-SIZE: 100%; FONT-WEIGHT: bold
                        }
                        DIV.code SPAN.identifier {

                        }
                        DIV.code SPAN.keyword {
                        COLOR: #871f78
                        }
                        DIV.code SPAN.parameter {
                        FONT-STYLE: italic
                        }
                        DIV.code SPAN.literal {
                        COLOR: #8b0000
                        }
                        DIV.code SPAN.comment {
                        COLOR: #006400
                        }
                        SPAN.syntaxLabel {
                        COLOR: #0481da; FONT-WEIGHT: bold
                        }
                        SPAN.introStyle {
                        COLOR: darkgray
                        }
                        DIV.seeAlsoStyle {
                        PADDING-TOP: 5px
                        }
                        TD.nsrBottom {
                        WIDTH: 100%; HEIGHT: 0.6em
                        }
                        SPAN.clsGlossary {
                        COLOR: #509950; CURSOR: default; FONT-WEIGHT: bold
                        }
                        DIV.clsTooltip {
                        BORDER-BOTTOM: black 1px solid; POSITION: absolute; BORDER-LEFT: black 1px solid; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: #ffffaa; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; DISPLAY: none; FONT-FAMILY: Arial; COLOR: black; FONT-SIZE: 8pt; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid; PADDING-TOP: 2px; TOP: 0px; LEFT: 0px
                        }
                        SPAN.feedbackcss {
                        WIDTH: 100%; MARGIN-LEFT: 15px; FONT-SIZE: 110%
                        }
                        DIV#feedbackarea TABLE {
                        BORDER-RIGHT-WIDTH: 0px; MARGIN-TOP: 0px; WIDTH: 300px; MARGIN-BOTTOM: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN-LEFT: 0px; BORDER-LEFT-WIDTH: 0px
                        }
                        DIV#feedbackarea TABLE TD {
                        BORDER-BOTTOM: 0px; TEXT-ALIGN: center; FONT-FAMILY: Verdana; FONT-SIZE: 100%
                        }
                        DIV#feedbackarea P {
                        MARGIN: 0px 5px 0px 6px; WIDTH: 100%; FONT-SIZE: 100%
                        }
                        DIV#feedbackarea H5 {
                        MARGIN-TOP: 0px; MARGIN-BOTTOM: 0.7em; MARGIN-LEFT: 6px; FONT-SIZE: 10pt
                        }
                        P.feedbackarea {
                        BACKGROUND-COLOR: #d4dfff; ; WIDTH: expression(document.body.clientWidth-27); FONT-SIZE: 100%
                        }
                        INPUT#submitFeedback {
                        TEXT-ALIGN: center; FONT-SIZE: 100%
                        }
                        SPAN#feedbackarea {
                        WIDTH: 100%
                        }
                        DIV#feedbackarea {
                        WIDTH: 100%
                        }
                        SPAN.filterOnHover {
                        COLOR: #e85f17
                        }
                        SPAN.filter {
                        COLOR: #0000ff
                        }
                        A IMG {
                        BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
                        }
                    </style></head><body><div id="header"><table id="bottomTable" cellpadding="0" cellspacing="0"><tr id="headerTableRow1"><td align="left"><span id="runningHeaderText" /></td></tr><tr id="headerTableRow2"><td align="left"><span id="nsrTitle">SharePoint 2013: Create clip animations in apps using the animation library</span></td></tr></table></div><div id="mainSection"><div id="mainBody"><font color="DarkGray"></font><p /><div class="summary"><p>This SharePoint-hosted app uses the <span sdata="langKeyword" value="SPAnimation"><span class="keyword">SPAnimation</span></span> engine to produce animation effects to move a photo in an <span sdata="langKeyword" value="img"><span class="keyword">img</span></span> tag around inside a <span sdata="langKeyword" value="div"><span class="keyword">div</span></span> that provides a clipping region.</p></div><div class="introduction" /><a name="O15Readme_Description" /><h1 class="heading">Description</h1><div id="sectionSection0" class="section" name="collapseableSection" style=""><p><span class="label">Provided by:</span>&nbsp;&nbsp;<a href="http://mvp.microsoft.com/en-US/findanmvp/Pages/profile.aspx?MVPID=52a3f2aa-710f-4496-9b78-f240eccc74ad" target="_blank">Ted Pattison</a>, <a href="http://www.criticalpathtraining.com" target="_blank">Critical Path Training</a></p><p>The ClipAnimator sample project demonstrates producing simple animations using the <span sdata="langKeyword" value="SPAnimation"><span class="keyword">SPAnimation</span></span> library. It shows to how move an &lt;img&gt; element that displays a photo around inside a parent &lt;div&gt; element in such a way that the photo is clipped when it moves outside the region defined by the parent <span sdata="langKeyword" value="div"><span class="keyword">div</span></span>.</p><p>Key features illustrated in the sample:</p><ul><li><p>Using the SPAnimation library.</p></li><li><p>Create animation objects based on <span sdata="langKeyword" value="SPAnimation.State"><span class="keyword">SPAnimation.State</span></span> and <span sdata="langKeyword" value="SPAnimation.Object"><span class="keyword">SPAnimation.Object</span></span>.</p></li><li><p>Performing a <span sdata="langKeyword" value="Basic_Move"><span class="keyword">Basic_Move</span></span> operation by setting the <span sdata="langKeyword" value="PositionX"><span class="keyword">PositionX</span></span> and <span sdata="langKeyword" value="PositionY"><span class="keyword">PositionY</span></span> attributes.</p></li></ul></div><a name="O15Readme_Prereq" /><h1 class="heading">Prerequisites</h1><div id="sectionSection1" class="section" name="collapseableSection" style=""><p>This sample requires the following:</p><ul><li><p>A SharePoint 2013 development environment using Office 365 or a local SharePoint farm</p></li><li><p>The SharePoint farm must be configured to support apps for SharePoint</p></li><li><p>Visual Studio 2012 and Office Developer Tools for Visual Studio 2012</p></li></ul></div><a name="O15Readme_components" /><h1 class="heading">Key components of the sample</h1><div id="sectionSection2" class="section" name="collapseableSection" style=""><p>The sample consists of a Visual Studio 2012 project for a SharePoint-hosted app named ClipAnimator.</p><p>The start page includes an &lt;img&gt; tag with a photo loaded from photo.jpg, and also a set of four command buttons that run the code that demonstrates creating animations. When you click each of the four buttons on the start page, it executes JavaScript code to produce an animation effect using the <span sdata="langKeyword" value="SPAnimation"><span class="keyword">SPAnimation</span></span> library.</p></div><a name="O15Readme_config" /><h1 class="heading">Configure the sample</h1><div id="sectionSection3" class="section" name="collapseableSection" style=""><p>Follow these steps to configure the sample.</p><ol><li><p>Make sure that you have a development environment with Office 365 or a local SharePoint farm.</p></li><li><p>Make sure that the SharePoint farm is configured to support apps for SharePoint.</p></li></ol></div><a name="O15Readme_test" /><h1 class="heading">Run and test the sample</h1><div id="sectionSection4" class="section" name="collapseableSection" style=""><div class="subSection"><ol><li><p>Open the solution <span class="ui">ClipAnimator</span> project.</p></li><li><p>Configure the project's <span sdata="langKeyword" value="Site Url"><span class="keyword">Site Url</span></span> property to point to a SharePoint 2013 test site.</p></li><li><p>Press F5 to test the app in the debugger.</p></li><li><p>When the start page is displayed, click each of the four buttons to see the animation effects.</p></li><li><p>Inspect the code in App.js, which produces the animations.</p></li></ol></div></div><a name="O15Readme_Troubleshoot" /><h1 class="heading">Troubleshooting</h1><div id="sectionSection5" class="section" name="collapseableSection" style=""><p>If the app fails to install, troubleshoot the following aspect of your development environment:</p><ul><li><p>Make sure your environment supports apps. In Visual Studio 2012, create a new SharePoint-hosted app, and ensure that you can deploy it in a test site on your farm. If you cannot, your environment is not configured to support apps for SharePoint.</p></li></ul></div><a name="O15Readme_Changelog" /><h1 class="heading">Change log</h1><div id="sectionSection6" class="section" name="collapseableSection" style=""><p>First release: January 2013</p></div><a name="O15Readme_RelatedContent" /><h1 class="heading">Related content</h1><div id="sectionSection7" class="section" name="collapseableSection" style=""><ul><li><p><a href="http://msdn.microsoft.com/en-us/library/fp179930.aspx" target="_blank">Apps for SharePoint overview</a></p></li><li><p><a href="http://msdn.microsoft.com/en-us/library/fp161179.aspx" target="_blank">How to: Set up an environment for developing apps for SharePoint on Office 365</a></p></li><li><p><a href="http://msdn.microsoft.com/en-us/library/fp179923.aspx" target="_blank">How to: Set up an on-premises development environment for apps for SharePoint</a></p></li><li><p><a href="http://msdn.microsoft.com/en-us/library/fp142379.aspx" target="_blank">How to: Create a basic SharePoint-hosted app</a></p></li></ul></div></div></div></body></html>